<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="../utils/react.16.14.0.js"></script>
    <script src="../utils/react-dom.16.14.0.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class TimeNow extends React.Component {
        constructor() {
          super();
          this.state = {
            time: "",
          };
        }
        componentDidMount = () => {
          setInterval(() => {
            var time = new Date().toLocaleString();
            this.setState({
              time,
            });
          }, 1000);
        };
        render = () => {
          const { time } = this.state;
          return <div>时间：{time}</div>;
        };
      }
      class MessageBox extends React.Component {
        onClick = () => {
          alert("clicked");
        };
        render = () => {
          return (
            <div>
              <h1 onClick={this.onClick}>Hello World!</h1>
              <TimeNow />
            </div>
          );
        };
      }
      ReactDOM.render(<MessageBox />, document.getElementById("app"));
    </script>
  </body>
</html>
